import React, { useState } from 'react'
import { Layout, Avatar } from 'antd';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined, SmileOutlined, UserOutlined
} from '@ant-design/icons';
import { Dropdown } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
const { Header } = Layout;
function TopHeader(props) {
    // const [collapsed, setcollapsed] = useState(false)
    const collapsedClick = () => {
        props.changeCollapsed()
        // setcollapsed(!collapsed)
    }

    const { role: { roleName }, username } = JSON.parse(localStorage.getItem('token'))

    const items = [
        {
            key: '1',
            label: (
                <span >{roleName}</span>
            ),
        },
        {
            key: '2',
            label: (
                <span onClick={
                    () => {
                        localStorage.removeItem('token')
                        props.history.replace('/login')
                    }
                }>退出登录</span>
            ),
        },
    ];
    return (
        <Header className="site-layout-background" style={{ padding: 0 }}>
            {props.isCollapsed ? <MenuUnfoldOutlined onClick={collapsedClick} /> :
                <MenuFoldOutlined onClick={collapsedClick} />}
            <div style={{ float: 'right', marginLeft: '10px' }}>欢迎<span style={{ color: '#1890ff' }}>{username}</span>回来
                <Dropdown
                    menu={{
                        items,
                    }}
                >
                    <Avatar size="large" icon={<UserOutlined />} />
                </Dropdown>
            </div>
        </Header>
    )
}

const mapStateToProps = ({ collectSet: { isCollapsed } }) => {
    return {
        isCollapsed
    }
}

const mapDispatchToProps = {
    changeCollapsed() {
        return {
            type: 'change_collapsed',
            //payload:{}
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHeader))